<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
	<title>dhtmlxGrid. Server side</title>
	<script src="<c:out value="${pageContext.request.contextPath}"/>/resources/tutorial/common/dhtmlx/dhtmlxgrid.js" type="text/javascript"></script>
	<script type="text/javascript" src="<c:out value="${pageContext.request.contextPath}"/>/resources/tutorial/common/jquery-2.1.3.min.js"></script>
	<link rel="stylesheet" type="text/css" href="<c:out value="${pageContext.request.contextPath}"/>/resources/tutorial/common/dhtmlx/dhtmlxgrid.css"/>
	<style>
		html, body {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0px;
		}
	</style>	
</head>
<body>
	<div id="mygrid_container" style="width:600px; height:160px;"></div>
	<button onclick="addBook()">Add Book</button>
	<button onclick="removeBook()">Remove Book</button>
	<script>
		var contextPath = "${pageContext.request.contextPath}" + "/resources/tutorial";
		var newBookId;
		dhtmlxEvent(window, "load", function(){
			mygrid = new dhtmlXGridObject("mygrid_container");
			mygrid.setImagePath(contextPath + "/common/dhtmlx/imgs/");
			mygrid.setHeader("BookId,Name,Quantity,Price");
			mygrid.setInitWidths("100,*,150,150");
			mygrid.setColAlign("center,left,right,right");
			mygrid.init();
			
			var tableRequest = $.ajax({
				url: '/bwf/tutorial5/book',
				type: 'GET',
				dataType: 'json'
			});
			
			tableRequest.done(function(info) {
				for (var i = 0; i < info.length; i++) {
					oneData = info[i];
					newBookId = [oneData['bookId']];
					mygrid.addRow(i+1, [oneData['bookId'], oneData['name'], oneData['quality'], oneData['price']]);
				}
			});
		});
		
		function addBook(){
			var newId = (new Date()).valueOf();
			newBookId++;
			alert(newBookId);
			mygrid.addRow(newId, newBookId + ",New book,0,0", mygrid.getRowsNum());
			mygrid.selectRowById(newId);
		}
		
		function removeBook() {
			var selId = mygrid.getSelectedId();
			mygrid.deleteRow(selId);
		}
		
		
	</script>
</body>
</html>